<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <!-- 轮播图 -->
        <div class="swiper">
          <!-- 跑马灯 插件 -->
          <el-carousel height="350px">
            <el-carousel-item v-for="item in swipers" :key="item.id">
              <img :src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 板块 -->
        <div class="plates">
          <div class="plate" v-for="item in plateData" :key="item.id">
            <!-- 头部 -->
            <div class="header">
              <div class="notice"></div>
              <div class="more">更多&gt;&gt;</div>
            </div>
            <!-- 列表区域 -->
            <ul class="list" v-if="item.aritcle.length >0">
              <li v-for="artItem in item.aritcle" :key="artItem.id">
                {{artItem.title}}
              </li>
            </ul>
             <ul class="list" v-else>
              <li>暂无数据</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer"></div>
  </div>
</template>

<script>
// 1.引入axios得get请求
import { get } from "../utils/request";
// 引入header组件
import Header from "./components/Header.vue";
export default {
  // 注册组件
  components:{
    // 1.引入所需得组件
    // 2.注册
    // 在ES6中 如果key value 同名 直接写应该属性就可以了
    Header
  },
  data() {
    return {
      // 轮播图得数据
      swipers: [],
      // 板块数据
      plateData:[]
    };
  },
  methods: {
    // 2.发送请求获取对应得数据
    // 获取轮播图得数据
    getSwipersData() {
      // 发送get请求
      get("/index/carousel/findAll").then((res) => {
        // console.log(res.data);
        this.swipers = res.data;
      });
    },
    // 获取板块所需的数据
    getPlateDate(){
      get('/index/article/findCategoryArticles').then(res =>{
        // console.log(res);
        this.plateData = res.data
      })
    }
  },
  created() {
    // 3.页面加载时自动执行花钱轮播图数据得方法 发送请求
    this.getSwipersData();
    // 自动获取板块数据
    this.getPlateDate()
  },
};
</script>

<style lang="scss" scoped>


// 体部样式
.content {
  background-color: #ecf6f2;
  .wrapper{
    // 轮播图样式
  .swiper {
    margin: 10px;
    img {
      width: 100%;
      height: 350px;
    }
  }
  .plates {
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    .plate {
      width: 30%;
      box-sizing: border-box;
      background-color: white;
      margin: 10px;
      .header {
        display: flex;
        justify-content: space-between;
      }
      .list {
        li {
          line-height: 2em;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
      }
    }
  }
  }
}

.footer{
  height: 200px;
  margin-top: 50px;
  background-color: aquamarine;
}
</style>